<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<div class="navi">ทดสอบ > เพิ่มทดสอบ</div>
<div class="post">
    <jsp:include page="../common/default-invalidate.jsp"></jsp:include>
    <div id="collapse" class="entry">
		<s:form theme="simple" id="formDefault">
				<table id="table" border="0" style="width: 100%;height: 100%">
					<tr class='odd'>
						<td class="textLabel right" width="20%">ปี</td>
						<td width="30%">
							<s:select name="testForm.year" cssClass="validate[required]"
							   list="#{'':'--- เลือก ---', '2555':'2555', '2556':'2556', '2557':'2557', '2558':'2558', '2559':'2559', '2560':'2560'}"
							/>&nbsp;<font class=textError>*</font>
						</td>
						<td class="textLabel right" width="20%"></td>
						<td width="30%"></td> 
					</tr>
					<tr class='even'>
						<td class="textLabel right" width="20%">ชื่อ</td>
						<td width="30%">
							<s:textfield name="testForm.fname" cssClass="validate[required] textField2" />&nbsp;<font class=textError>*</font>
						</td>
						<td class="textLabel right" width="20%">นามสกุล</td>
						<td width="30%"><s:textfield name="testForm.lname" cssClass="validate[required] textField2" />&nbsp;<font class=textError>*</font></td> 
					</tr>
					<tr class='odd'>
						<td class="textLabel right" width="20%">วันที่</td>
						<td width="30%">
							<s:textfield name="testForm.citizen" cssClass="validate[custom[date]] textField2 datepicker" />&nbsp;<font class=textError>*</font>
						</td>
						<td class="textLabel right" width="20%">เบอร์ติดต่อ</td>
						<td width="30%">
							<s:textfield name="testForm.tel" cssClass="validate[optional,minSize[10]] textField2" />&nbsp;<font class=textError>*</font>
						</td>
					</tr>
					<tr class='odd' style="display: none;">
						<td class="textLabel" colspan="4">
							<fieldset>
								<legend>
									Required!
								</legend>
								<label>
									<span>Field is required : </span>
									<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
								</label>
								<legend>
									Placeholder & required
								</legend>
								<label>
									<span>Field is required : </span>
									<input value="This is a placeholder" data-validation-placeholder="This is a placeholder" class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" />
								</label>
								<label>
									<span>Favorite sport 1:</span>
									<select name="sport" id="sport" class="validate[required]">
										<option value="">Choose a sport</option>
										<option value="option1">Tennis</option>
										<option value="option2">Football</option>
										<option value="option3">Golf</option>
									</select>
								</label>
								<label>
									<span>Favorite sport 2:</span>
									<select name="sport2" id="sport2" multiple class="validate[required]">
										<option value="">Choose a sport</option>
										<option value="option1">Tennis</option>
										<option value="option2">Football</option>
										<option value="option3">Golf</option>
									</select>
								</label>
								<br/>
								validate[required]
							</fieldset>
								
							<fieldset>
								<legend>
									Custom
								</legend>
								<label>
									<p>Comes with many predifined regex (phone, url, ip, email..etc)</p>
									<a href="demoRegExp.html">[DEMO]</a>
									<br/>
									<span>Enter a URL : </span>
									<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
									<br/>
									validate[required,custom[url]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Equals
								</legend>
								<label>
									<span>Password : </span>
									<input value="karnius" class="validate[required] text-input" type="password" name="password" id="password" />
								</label>
								<label>
									<span>Confirm password : </span>
									<input value="kaniusBAD" class="validate[required,equals[password]] text-input" type="password" name="password2" id="password2" />
									<br/>
									validate[required,equals[password]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Function
								</legend>
								<label>
									<span>Write 'HELLO' : </span>
									<input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text" id="lastname" name="lastname" />
									<br/>
									validate[required,funcCall[checkHELLO]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Conditional required
								</legend>
								<label>
									<span>Depending field (1): </span>
									<input value="" class="text-input" type="text" name="dep1" id="dep1" />
								</label>
								<label>
									<span>This field is required if above field has a value : </span>
									<input class="validate[condRequired[dep1]] text-input" type="text" name="conditionalrequired1" id="conditionalrequired1" />
					                                <br/>
									validate[condRequired[dep1]]
								</label>
					                        
								<label>
					                                <br/>
					                                <strong>OR with 2 depending fields</strong><br/>
					                                <br/>
									<span>Depending field (2a) : </span>
									<input value="" class="text-input" type="text" name="dep2a" id="dep2a" />
								</label>
								<label>
									<span>Depending field (2b) : </span>
									<input value="" class="text-input" type="text" name="dep2b" id="dep2b" />
								</label>
								<label>
									<span>This field is required if any of above fields has a value : </span>
									<input class="validate[condRequired[dep2a,dep2b]] text-input" type="text" name="conditionalrequired2" id="conditionalrequired2" />
					                                <br/>
									validate[condRequired[dep2a,dep2b]]
								</label>
					                    
							</fieldset>
								
							<fieldset>
								<legend>
									MinSize
								</legend>
								<label>
									Minimum field size
									<br/>
									<input value="" class="validate[required,minSize[6]] text-input" type="text" name="minsize" id="minsize" />
									<br/>
									validate[required,minSize[6]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									MaxSize
								</legend>
								<label>
									Maximum field size, optional
									<br/>
									<input value="0123456789" class="validate[optional,maxSize[6]] text-input" type="text" name="maxsize" id="maxsize" />
									<br/>
									validate[maxSize[6]]<br/>
									note that the field is optional - it won't fail if it has no value
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Min
								</legend>
								<label>
									integer >= -5
									<br/>
									<input value="-7" class="validate[required,custom[integer],min[-5]] text-input" type="text" name="min" id="min" />
									<br/>
									validate[required,custom[integer],min[-5]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Max
								</legend>
								<label>
									integer ,50]
									<br/>
									<input value="55" class="validate[required,custom[integer],max[50]] text-input" type="text" name="max" id="max" />
									<br/>
									validate[required,custom[integer],max[50]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Past
								</legend>
								<label>
									Checks that the value is a date in the past
									<br/>
									<span>Please enter a date ealier than 2010/01/01</span>
									<input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input" type="text" name="past" id="past" />
									<br/>
									validate[custom[date],past[2010/01/01]]
								</label>
							</fieldset>
								
							<fieldset>
								<legend>
									Future
								</legend>
								<label>
									Checks that the value is a date in the future
									<br/>
									<span>Please enter a date older than today's date</span>
									<input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text" name="future" id="future" />
									<br/>
									validate[custom[date],future[NOW]]<br/><br/>
							</fieldset>
								
							<fieldset>
								<legend>
									Group required
								</legend>
								<label>
									Checks if at least one of the input is not empty.
									<br/>
									<br/>
									<span>Please enter a credit card</span>
								</label>
								<input value="" class="validate[groupRequired[payments]] text-input" type="text" name="creditcard1" id="creditcard1" />
								<label><strong>OR</strong></label><br/>
								<label>Please enter a paypal acccount</label>
								<input value="" class="validate[groupRequired[payments],custom[email]] text-input" type="text" name="paypal" id="paypal" />
								<label><strong>OR</strong></label><br/>
								<label>Please enter a bank account</label>
								<input value="" class="validate[groupRequired[payments],custom[integer]] text-input" type="text" name="bank" id="bank" />
								<label><strong>OR</strong></label><br/>
								<label>Please  choose from select</label>
								<select class="validate[groupRequired[payments]] text-input" type="text" name="bank2" id="bank2">
									<option value="">Choose a payment option</option>
									<option value="Paypal">Paypal</option>
									<option value="Bank">Bank account</option>
								</select>
							</fieldset>
								
							<fieldset>
								<legend>
									Date Range<br />
								</legend>
								<label>
									Checks that the start date is before the end date.
									Please enter an end date ealier than the start date<br /><br />
									<label for="date1">Start Date : </label>
									<input value="9/1/2009"  class="validate[dateRange[grp1]]" type="text" id="date1" />
								</label>
								<label>
									<label for="date2">End Date : </label>
									<input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2" />
									<br/>
									validate[dateRange[grp1]]<br />
									Note* Both fields must have the same name
								</label>
							</fieldset>
							<fieldset>
								<label>
									<span>Field is required with function : </span>
									<input value="" class="validate[required, custom[requiredInFunction]] text-input" type="text" name="req3" id="req3" />
								</label>
							</fieldset>
							<fieldset>
								<legend>
									Date Time Range<br />
								</legend>
								<label>
									Checks that the start date and time are before the end date and time.
									Please enter an end date ealier than the start date<br /><br />
									<label for="date1">Start Date Time: </label>
									<input value="9/1/2009 9:30:00 PM"  class="validate[dateTimeRange[grp2]]" type="text" id="datetime1" />
								</label>
								<label>
									<label for="date2">End Date Time: </label>
									<input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text" id="datetime2" />
									<br/>
									validate[dateTimeRange[grp2]<br />
									Note* Both fields must have the same name
								</label>
							</fieldset>
							
							<fieldset>
								<script>
							/**
							* 
							* @param {input[type=checkbox]} the checkbox to read
							* @param {input[type=textbox]} the field bound to the checkbox that gets enabled or disabled
							*/
							    function ToggleState(checkbox, field) {
										if ($(checkbox).attr('checked'))
											$(field).attr('disabled', 'disabled');
										else
											$(field).removeAttr('disabled');
							    }
								</script>
								<legend>
									Date compare<br />
								</legend>
					
									Checks that the first date is before the second date.
									Please enter the second date ealier than the first date<br /><br />
									<label>First Date :<br />
										<input class="checkbox" type="checkbox" name="name1" id="name1" onclick="javascript:ToggleState('#name1', '#dateCmp1');" />
										<i>Disable first date field</i><br />
									</label>
									<input value="2011/3/4" class="validate[custom[date],past[#dateCmp2]]" type="text" name="dateCmp1" id="dateCmp1" />
									<br/>
									validate[custom[date],past[#dateCmp2]]<br /><br />
									<label>Second Date :<br />
										<input class="checkbox" type="checkbox" name="name2" id="name2" onclick="javascript:ToggleState('#name2', '#dateCmp2');" />
										<i>Disable second date field</i><br />
									</label>
									<input value="2010/1/2" class="validate[custom[date],future[#dateCmp1]]" type="text" name="dateCmp2" id="dateCmp2" />
									<br/>
									validate[custom[date],future[#dateCmp1]]<br />
							</fieldset>
					
							<fieldset>
								<legend>
									Credit Card
								</legend>
								<label>
									Checks that the credit card number is at least theoretically valid, according the to the
									<a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>, but not
									whether the specific card number is active with a bank, etc.
					
									<br/>
									<br/>
									Since credit cards are often presented in different formats, spaces and
									hyphens (' ','-') are simply ignored.
					
									<br/>
									<br/>
									Examples:<br/>
									<ul>
										<li>4111 1111 1111 1111</li>
										<li>3737-321345-610004</li>
									</ul>
									<a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm">More examples</a>
									<br/>
									<input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2" id="creditcard2" />
									<br/>
									validate[required,creditCard]
								</label>
							</fieldset>
							<fieldset>
								<legend>
									Phone
								</legend>
								<div>
									<span>Radio Groupe : 
										<br/>
									</span>
									<span>radio 1: </span>
									<input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/><span>radio 2: </span>
									<input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/><span>radio 3: </span>
									<input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/>
								</div>
								<div>
									<span>Minimum 2 checkbox : 
										<br/>
									</span>
									<input class="validate[minCheckbox[2]] " type="checkbox" name="group1" id="maxcheck1" value="5"/>
									<input class="validate[minCheckbox[2]] " type="checkbox" name="group1" id="maxcheck2" value="3"/>
									<input class="validate[minCheckbox[2]] " type="checkbox" name="group1" id="maxcheck3" value="9"/>
								</div>
								<div>
									<span><b>Maximum</b> 2 checkbox : 
										<br/>
									</span>
									<input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck4" value="5"/>
									<input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck5" value="3"/>
									<input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck6" value="9"/>
								</div>
					                
					                
							</fieldset>
						</td>
					</tr>
					<tr class='even'>
						<td></td>
						<td>
							<input id="testCreateSave" type="button" value="สร้าง">&nbsp;<input id="resetForm" type="button" value="ยกเลิก">
						</td>
						<td></td>
						<td>
						</td>
					</tr>
					
				</table>
		</s:form>
	</div>
</div>


